<template>
	<view class="content">
		<view class="header"><image src="../../static/shilu-login/logo.png"></image></view>
		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/shilu-login/1.png"></image>
				<input class="biaoti" v-model="phoneno"  placeholder="输入邮箱" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<input class="biaoti" v-model="password" type="text" maxlength="32" placeholder="输入密码" password="true" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/3.png"></image>
				<input class="biaoti" v-model="code" maxlength="4" placeholder="验证码" />
				<view class="yzm">
					<!-- 		 <img
				    :src="imgsrc"
				    alt
				    :width="w"
				    :height="h"
				    style="cursor:pointer;"
				    @click="checkCode_img"
				  /> -->
					<image class="yzgimg" :src="imgsrc" style="cursor:pointer;" @click="checkCode_img"></image>
				</view>
			</view>
		</view>
		<view class="dlbutton" hover-class="dlbutton-hover" @tap="bindLogin()"><text>登录</text></view>
		<view class="xieyi">
			<navigator url="forget" open-type="navigate">忘记密码</navigator>
			<text>|</text>
			<navigator url="reg" open-type="navigate">注册账户</navigator>
		</view>
	</view>
</template>

<script>
var tha;
import baseurl from '@/common/http/interface.js';
import api from '@/common/http/module/user.js';
import { mapActions } from 'vuex';
export default {
	onLoad() {
		tha = this;
		console.log(baseurl.config.baseUrl);
		this.checkCode_img();
	},
	data() {
		return {
			phoneno: '2810201146@qq.com',
			password: 'zhou24272592',
			imgsrc: '',
			w: 100,
			h: 32,
			code: 'acvs',
			codeKey:''
		};
	},
	methods: {
		...mapActions(['Login', 'ifVerify']),
		checkCode_img() {
			api.getVerify().then(res => {
				this.imgsrc = 'data:image/png;base64,' + res.data.b64;
				this.codeKey = res.data.code
				this.$store.commit("updataCodeKey", res.data.code);
			});
		},

		bindLogin() {
			if (this.phoneno.length <= 0) {
				uni.showToast({
					icon: 'none',
					title: '账号不能为空'
				});
				return;
			}
			if (this.password.length < 6) {
				uni.showToast({
					icon: 'none',
					title: '密码至少6位'
				});
				return;
			}
			if (this.code.length <= 3) {
				uni.showToast({
					icon: 'none',
					title: '验证码不完整'
				});
				return;
			}
			let code = this.code;
			let phoneno = this.phoneno;
			let password = this.password;
			let key = this.codeKey;
			this.ifVerify({ code,key }).then(res => {
				if (res.state) {
					this.Login({ phoneno, password }).then(res => {
						
					});
				} else {
					uni.showModal({
						content: res.msg,
						showCancel: false
					});
				}
			});

			// this.Login({phoneno,password,code})
			// .then(res=>{
			// 	console.log('登录页面接受的参数：',res)
			// })
			// uni.request({
			//     url: 'http://***/login.html',
			//     data: {
			// 		phoneno:this.phoneno,
			// 		password:this.password
			// 	},
			// 	method: 'POST',
			// 	dataType:'json',
			//     success: (res) => {
			// 		if(res.data.code!=200){
			// 			uni.showToast({title:res.data.msg,icon:'none'});
			// 		}else{
			// 			uni.setStorageSync('user_data', JSON.stringify(res.data.data));
			// 			this.login();
			// 			uni.navigateBack();
			// 		}
			//     }
			// });
		}
	}
};
</script>

<style>
.yzgimg {
	width: 180upx;
	height: 80upx;
}
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.header {
	width: 161upx;
	height: 161upx;
	background: rgba(63, 205, 235, 1);
	box-shadow: 0upx 12upx 13upx 0upx rgba(63, 205, 235, 0.47);
	border-radius: 50%;
	margin-top: 30upx;
	margin-left: auto;
	margin-right: auto;
}
.header image {
	width: 161upx;
	height: 161upx;
	border-radius: 50%;
}

.list {
	display: flex;
	flex-direction: column;
	padding-top: 50upx;
	padding-left: 70upx;
	padding-right: 70upx;
}
.list-call {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100upx;
	color: #333333;
	border-bottom: 1upx solid rgba(230, 230, 230, 1);
}
.list-call .img {
	width: 40upx;
	height: 40upx;
}
.list-call .biaoti {
	flex: 1;
	text-align: left;
	font-size: 32upx;
	line-height: 100upx;
	margin-left: 16upx;
}

.dlbutton {
	color: #ffffff;
	font-size: 34upx;
	width: 470upx;
	height: 100upx;
	background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
	box-shadow: 0upx 0upx 13upx 0upx rgba(164, 217, 228, 0.2);
	border-radius: 50upx;
	line-height: 100upx;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100upx;
}
.dlbutton-hover {
	background: linear-gradient(-90deg, rgba(63, 205, 235, 0.9), rgba(188, 226, 158, 0.9));
}
.xieyi {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 30upx;
	margin-top: 80upx;
	color: #ffa800;
	text-align: center;
	height: 40upx;
	line-height: 40upx;
}
.xieyi text {
	font-size: 24upx;
	margin-left: 15upx;
	margin-right: 15upx;
}
</style>
